import React from 'react'
import {Modal,Form, Input, message,Select} from 'antd'
import{SmileOutlined,UnderlineOutlined,BulbOutlined} from '@ant-design/icons';
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { addPowerActionAsync } from '../../../redux/action/powerAction';
const { Option } = Select;
function AddPower(props) {
  const handleSubmit=async ()=>{
    try{
      const fieldsValue = await PowerAddForm.validateFields()
      fieldsValue.status=1
      fieldsValue.key=Date.now()+''
      props.addPowerActionAsync(fieldsValue)
      PowerAddForm.resetFields()
      console.log(fieldsValue)
      props.close()
      message.success('添加成功!')
    }
    catch{
      message.error('添加失败!')
    }
  }
  const [PowerAddForm]=Form.useForm()
  return (
    <Modal
      title="添加权限信息"
      okText='添加'
      cancelText='取消'
      visible={props.visible}
      onCancel={()=>{
        PowerAddForm.resetFields()
        props.close()
        }}
      onOk={handleSubmit}
    >
      <Form
        layout="horizontal"
        form={PowerAddForm}
        name="PowerAddForm"
      >
        <Form.Item
            name="des"
            label="权限描述"
            rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入权限描述(权限名)!',
              },
            ]}
          >
            <Input prefix={<SmileOutlined />} placeholder='权限名'/>
        </Form.Item>
        <Form.Item
            name="powerType"
            label="权限类型"
            rules={[
              {
                required: true,
              },
            ]}
            initialValue='menu'
          >
          <Select style={{ width: '30%' }}>
            <Option value='menu'>menu</Option>
            <Option value='file'>file</Option>
          </Select>
        </Form.Item>
        <Form.Item
            name="url"
            label="url地址&nbsp;&nbsp;&nbsp;"
            rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入url!',
              },
            ]}
          >
            <Input prefix={<UnderlineOutlined />} placeholder='url'/>
        </Form.Item>
        <Form.Item
            name="code"
            label="权限码&nbsp;&nbsp;&nbsp;"
            rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入权限码!',
              },
            ]}
          >
            <Input prefix={<BulbOutlined />} placeholder='权限码'/>
        </Form.Item>
      </Form>
    </Modal>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    PowerList:state.powerList
	}),
	{addPowerActionAsync}
)(AddPower)
